<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="demo">
    性：<input type="text" placeholder="FirstName" v-model='firstName'><br>
    名：<input type="text" placeholder="LastName" v-model="lastName"><br>
    单向：<input type="text" placeholder="FirstName+LastName" v-model='fullName'><br>
    单向：<input type="text" placeholder="LastName+FirstName" v-model='fullName2'><br>
    双向：<input type="text" placeholder="LastName+FirstName" v-model='fullName3'><br>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
       el:'#demo',
       data:{
         firstName:'A',
         lastName:'B',
         fullName2:'A-B'
       },
       firstName:{
         handler(value){
           this.fullName2=value+'-'+this.lastName
         }
       },
      computed:{
       fullName (){
          return this.firstName+'-'+this.lastName;
       },
       fullName3:{
        get(){
        return this.firstName+'-'+this.lastName;
        },
        set(value){
           const names = value.split('-');
           this.firstName=names[0];
           this.lastName=names[1];
        }
      },
     },
    
      watch:{
        lastName(value){
           this.fullName2=this.firstName+'-'+value
        }
      }
    })
    vm.$watch('firstName',function(value){
      this.fullName2 = value+'-'+this.lastName
    })
  </script>
</body>
</html>